<template>
	<view>
		<view v-for="m in msgList" class="my_list" @click="goChat(m)">
			<img class="list_img" :src="$.getImg(m.header)"/>
			<view class="list_mid">
				<text style="font-weight: 900;">{{m.nickname}}</text>
				<text style="font-size: 25rpx; color: gray; overflow: hidden;
					width: 300rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;">{{m.msg}}</text>
			</view>
			<view style="font-size: 25rpx; color: gray; display: flex; flex-direction: column-reverse;">
				{{m.time}}
				<uni-badge size="small" :text="m.num" absolute="rightTop" type="error">
					<view style="height: 30rpx;"></view>
				</uni-badge>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				header: "/static/header.jpeg",
				msgList: []
			}
		},
		onLoad() {
			//首页加载时判断 - 当前是否登录
			this.$.isLogin();
			
			//读取缓存
			this.msgList = uni.getStorageSync("messageShowList") ? JSON.parse(uni.getStorageSync("messageShowList")) : [];
			
			//清空未读
			uni.$on("clearNum", (fid) => {
				//循环获取交互信息
				for(var i = 0; i < this.msgList.length; i++){
					//获取每一个交互信息
					var m = this.msgList[i];
					//判断当前交互是否存在
					if(m.fid != fid) continue;
					//找到当前好友的交互
					m.num = 0;
					//缓存
					uni.setStorageSync("messageShowList", JSON.stringify(this.msgList));
				}
			});
			
			//注册聊天列表更新事件
			uni.$on("messagelist", (msgObj) => {
				console.log("接收到最新的交互",msgObj);
				
				//获取好友id
				var fid = (msgObj.from == this.$.getUserInfo().uid ? msgObj.to : msgObj.from);
				var fInfo = uni.getStorageSync("friendsInfo_" + fid);
				
				//判断列表中是否存在当前好友的交互信息
				for(var i = 0; i < this.msgList.length; i++){
					//获取每一个交互信息
					var m = this.msgList[i];
					//判断当前交互是否存在
					if(m.fid != fid) continue;
					
					//找到当前好友的交互
					m.msg = msgObj.msg;
					m.time = this.timeFormat(new Date());
					m.num++;
					
					//删除
					this.msgList.splice(i, 1);
					this.msgList.unshift(m);
					
					//缓存
					uni.setStorageSync("messageShowList", JSON.stringify(this.msgList));
					
					//结束当前方法
					return;
				}
				
				
				//构建聊天的交互对象
				var msgShow = {
					fid: fid,
					header: fInfo.header,
					msg: msgObj.msg,
					time: this.timeFormat(new Date()),
					nickname: fInfo.nickname,
					num: 1
				}
				
				//更新交互列表
				this.msgList.unshift(msgShow);
				
				//缓存交互列表
				uni.setStorageSync("messageShowList", JSON.stringify(this.msgList));
			});
		},
		onUnload() {
			//卸载聊天消息事件
			uni.$off("messagelist");
		},
		methods: {
			//去到指定好友的聊天页面
			goChat(finfo){
			
				//适配聊天页面
				finfo.id = finfo.fid;
				finfo.name = finfo.nickname;
				finfo.img = finfo.header;
				
				uni.navigateTo({
					url: "/pages/chat/chat?friendInfo=" + JSON.stringify(finfo)
				})
			},
			//时间格式化代码
			timeFormat(t){
				var m = t.getMonth();
				var d = t.getDate();
				var h = t.getHours();
				var min = t.getMinutes();
				return m + "-" + d + " " + h + ":" + min;
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.my_list {
		height: auto;
		margin: 20rpx 40rpx;
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.list_img {
		width: 100rpx;
		height: 100rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		margin-right: 20rpx;
		border-radius: 50rpx;
	}
	
	.list_mid {
		display: flex;
		flex-direction: column;
		height: auto;
		justify-content: space-evenly;
		flex: 1;
	}
</style>
